<template>
  <div class="box">
    <h2>子组件 add</h2>从父组件中获取的值:
    <label for>{{num}}</label>
    <br />
    <input type="text" name id v-model.number="nums" />
    <button @click="add">值+1</button>
    <button @click="addinput">值+{{nums}}</button>
  </div>
</template>
<style lang="css">
.box {
  border: 1px solid #ccc;
  width: 200px;
  padding: 5px;
  margin: 20px;
}
</style>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'AddItem',
  data() {
    return {
      nums: 0,
    }
  },
  props: {
    //   getNum:{
    //       type:Number
    //   }
    // value:{
    //     type:Number
    // }
  },
  computed: {
    // vuex 映射我们 state 数据
    ...mapState(['num']),
  },
  methods: {
    ...mapMutations(['addany', 'sub', 'adds']),
    add() {
      // 得到值-1 把这个结果传出去；
      //   const res = this.value + 1;
      //传出去 v-model input 通过 input 事件向外发送信息
      //   this.$emit('input',res)
      // 简单粗暴
      // this.$store.state.num++
      // 温文尔雅
      this.adds()
    },
    addinput() {
      // 直接写法
      // this.$store.commit('addany',this.nums)
      // 映射的方法
      this.addany({
        val: this.nums,
      })
      //  this.addany(this.nums)
    },
  },
}
</script>